import React, { useState, useEffect } from 'react';
import { Form, Slider, InputNumber, Button } from 'antd';
import styles from './index.less';
const DemoForm = props => {
  const [form] = Form.useForm();
  useEffect(() => {
    if (props.init) props.init(form);
  }, []);
  const initialValues = {
    // 初始的 sliders 值
    sliders: [
      {
        key: 'unitPriceOfSulfuricAcid',
        name: '硫酸单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 500: '500' },
        min: 0,
        max: 500,
      },
      {
        key: 'hydrochloricAcidUnitPrice',
        name: '盐酸单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 500: '500' },
        min: 0,
        max: 500,
      },
      {
        key: 'hydrogenPeroxideUnitPrice',
        name: '双氧水单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 500: '500' },
        min: 0,
        max: 500,
      },
      {
        key: 'unitPriceOfScaleInhibitor',
        name: '阻垢剂单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 500: '500' },
        min: 0,
        max: 500,
      },
      {
        key: 'unitPriceOfFungicide',
        name: '杀菌剂单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 500: '500' },
        min: 0,
        max: 500,
      },
      {
        key: 'ferrousSulfateUnitPrice',
        name: '硫酸亚铁单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 500: '500' },
        min: 0,
        max: 500,
      },
      {
        key: 'unitPriceOfLimestone',
        name: '石灰石单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 1000: '1000' },
        min: 0,
        max: 1000,
      },
      {
        key: 'unitPriceOfActivatedCarbon',
        name: '活性碳单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 10000: '10000' },
        min: 0,
        max: 10000,
      },
      {
        key: 'unitPriceOfAmmoniaWater',
        name: '氨水单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 5000: '5000' },
        min: 0,
        max: 5000,
      },
      {
        key: 'sodiumBicarbonateUnitPrice',
        name: '碳酸氢钠单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 5000: '5000' },
        min: 0,
        max: 5000,
      },
      {
        key: 'cementUnitPrice',
        name: '水泥单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 5000: '5000' },
        min: 0,
        max: 5000,
      },
      {
        key: 'unitPriceOfChelatingAgent',
        name: '螯合剂单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 5000: '5000' },
        min: 0,
        max: 5000,
      },

      {
        key: 'unitPricePerTonBag',
        name: '吨袋单价',
        unit: '元/个',
        value: 0,
        marks: { 0: '0', 50: '50' },
        min: 0,
        max: 50,
      },
      {
        key: 'unitPriceOfDeodorant',
        name: '除臭剂单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 5000: '5000' },
        min: 0,
        max: 5000,
      },
      {
        key: 'unitPriceOfInhibitor',
        name: '抑制剂单价',
        unit: '元/个',
        value: 0,
        marks: { 0: '0', 50: '50' },
        min: 0,
        max: 50,
      },
      {
        key: 'unitPriceOfCoal',
        name: '煤炭单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 5000: '5000' },
        min: 0,
        max: 5000,
      },
      {
        key: 'dieselOilUnitPrice',
        name: '柴油单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 10000: '10000' },
        min: 0,
        max: 10000,
      },
      {
        key: 'unitPriceOfGas',
        name: '天然气单价',
        unit: '元/万Nm³',
        value: 0,
        marks: { 0: '0', 10000: '10000' },
        min: 0,
        max: 10000,
      },
      {
        key: 'unitPriceOfWaterReplenishment',
        name: '补水单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 100: '100' },
        min: 0,
        max: 100,
      },
      {
        key: 'unitPriceOfPurchasedElectricity',
        name: '外购电单价',
        unit: '元/Kwh',
        value: 0,
        marks: { 0: '0', 100: '100' },
        min: 0,
        max: 100,
      },
      {
        key: 'fixedCost',
        name: '固定成本',
        unit: '万元',
        value: 0,
        marks: { 0: '0', 10000: '10000' },
        min: 0,
        max: 10000,
      },
    ],

    // 初始的 InputNumber 值
    inputNumbers: [
      {
        key: 'unitPriceOfSulfuricAcid',
        name: '硫酸单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 500: '500' },
        min: 0,
        max: 500,
      },
      {
        key: 'hydrochloricAcidUnitPrice',
        name: '盐酸单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 500: '500' },
        min: 0,
        max: 500,
      },
      {
        key: 'hydrogenPeroxideUnitPrice',
        name: '双氧水单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 500: '500' },
        min: 0,
        max: 500,
      },
      {
        key: 'unitPriceOfScaleInhibitor',
        name: '阻垢剂单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 500: '500' },
        min: 0,
        max: 500,
      },
      {
        key: 'unitPriceOfFungicide',
        name: '杀菌剂单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 500: '500' },
        min: 0,
        max: 500,
      },
      {
        key: 'ferrousSulfateUnitPrice',
        name: '硫酸亚铁单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 500: '500' },
        min: 0,
        max: 500,
      },
      {
        key: 'unitPriceOfLimestone',
        name: '石灰石单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 1000: '1000' },
        min: 0,
        max: 1000,
      },
      {
        key: 'unitPriceOfActivatedCarbon',
        name: '活性碳单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 10000: '10000' },
        min: 0,
        max: 10000,
      },
      {
        key: 'unitPriceOfAmmoniaWater',
        name: '氨水单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 5000: '5000' },
        min: 0,
        max: 5000,
      },
      {
        key: 'sodiumBicarbonateUnitPrice',
        name: '碳酸氢钠单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 5000: '5000' },
        min: 0,
        max: 5000,
      },
      {
        key: 'cementUnitPrice',
        name: '水泥单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 5000: '5000' },
        min: 0,
        max: 5000,
      },
      {
        key: 'unitPriceOfChelatingAgent',
        name: '螯合剂单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 5000: '5000' },
        min: 0,
        max: 5000,
      },

      {
        key: 'unitPricePerTonBag',
        name: '吨袋单价',
        unit: '元/个',
        value: 0,
        marks: { 0: '0', 50: '50' },
        min: 0,
        max: 50,
      },
      {
        key: 'unitPriceOfDeodorant',
        name: '除臭剂单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 5000: '5000' },
        min: 0,
        max: 5000,
      },
      {
        key: 'unitPriceOfInhibitor',
        name: '抑制剂单价',
        unit: '元/个',
        value: 0,
        marks: { 0: '0', 50: '50' },
        min: 0,
        max: 50,
      },
      {
        key: 'unitPriceOfCoal',
        name: '煤炭单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 5000: '5000' },
        min: 0,
        max: 5000,
      },
      {
        key: 'dieselOilUnitPrice',
        name: '柴油单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 10000: '10000' },
        min: 0,
        max: 10000,
      },
      {
        key: 'unitPriceOfGas',
        name: '天然气单价',
        unit: '元/万Nm³',
        value: 0,
        marks: { 0: '0', 10000: '10000' },
        min: 0,
        max: 10000,
      },
      {
        key: 'unitPriceOfWaterReplenishment',
        name: '补水单价',
        unit: '元/t',
        value: 0,
        marks: { 0: '0', 100: '100' },
        min: 0,
        max: 100,
      },
      {
        key: 'unitPriceOfPurchasedElectricity',
        name: '外购电单价',
        unit: '元/Kwh',
        value: 0,
        marks: { 0: '0', 100: '100' },
        min: 0,
        max: 100,
      },
      {
        key: 'fixedCost',
        name: '固定成本',
        unit: '万元',
        value: 0,
        marks: { 0: '0', 10000: '10000' },
        min: 0,
        max: 10000,
      },
    ],
  };

  const onFinish = values => {
    console.log('Form values:', values);
  };

  const onSliderChange = (index, value) => {
    const sliders = form.getFieldValue('sliders').slice(); // 获取当前的 Slider 值
    sliders[index] = value; // 更新对应索引的 Slider 值
    form.setFieldsValue({ sliders }); // 更新表单字段的值

    // InputNumber 和 Slider 之间双向联动
    const inputNumbers = form.getFieldValue('inputNumbers').slice(); // 获取当前的 InputNumber 值
    inputNumbers[index] = value; // 更新对应索引的 InputNumber 值
    form.setFieldsValue({ inputNumbers }); // 更新表单字段的值
  };

  const onInputNumberChange = (index, value) => {
    const inputNumbers = form.getFieldValue('inputNumbers').slice(); // 获取当前的 InputNumber 值
    inputNumbers[index] = value; // 更新对应索引的 InputNumber 值
    form.setFieldsValue({ inputNumbers }); // 更新表单字段的值

    // InputNumber 和 Slider 之间双向联动
    const sliders = form.getFieldValue('sliders').slice(); // 获取当前的 Slider 值
    sliders[index] = value; // 更新对应索引的 Slider 值
    form.setFieldsValue({ sliders }); // 更新表单字段的值
  };

  const validateInputNumber = (_, value) => {
    if (value < 1 || value > 100) {
      return Promise.reject('请输入1到100之间的数字');
    }
    return Promise.resolve();
  };

  return (
    <div className={styles.CoefficientForm}>
      <Form
        form={form}
        onFinish={onFinish}
        initialValues={initialValues}
        layout="vertical"
      >
        {initialValues.sliders.map((sliderValue, index) => (
          <div className={styles.inputNumberSlider}>
            <Form.Item
              style={{ marginBottom: 0 }}
              key={sliderValue.key}
              name={sliderValue.key}
              label=""
              // rules={[
              //   { required: true, message: '请输入Input Number的值' },
              //   { validator: validateInputNumber },
              // ]}
            >
              <InputNumber
                size="small"
                step={0.1}
                style={{
                  position: 'absolute',
                  top: 2,
                  left: 130,
                  zIndex: 1000,
                  width: 98,
                }}
                addonAfter={sliderValue.unit}
                onChange={value => onInputNumberChange(index, value)}
              />
            </Form.Item>
            <Form.Item
              key={index}
              name={sliderValue.key}
              label={sliderValue.name}
              rules={[{ required: true, message: '请选择/输入Slider的值' }]}
            >
              <Slider
                step={0.1}
                onChange={value => onSliderChange(index, value)}
                marks={sliderValue.marks}
                min={sliderValue.min}
                max={sliderValue.max}
              />
            </Form.Item>
          </div>
        ))}
      </Form>
    </div>
  );
};

export default DemoForm;
